<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>task02_02</title>
    <link rel="stylesheet" href="../task02/css/task02_02.css">
    <script src="../jquery-3.6.0.js"></script>
</head>
<body>
    <header>
        <a href="./task02_01.html"><img src="../task02/images/task02_return.png" alt=""></a>
        <div>参数设置</div>
        <img src="../task02/images/task02_help.png" alt="">
    </header>
    <div class="main">
        <div class="matchBox">
            <div class="f">
                <p class="s">玩家匹配</p>
            </div>
            <div class="matchType">
                <div class="people">
                    <div class="patternOrange"></div>
                    杀手 <span id="killer">2</span> 人
                </div>
                <div class="people">
                    <div class="patternBlue"></div>
                    平民 <span id="civilian">9</span> 人
                </div>
                
            </div>
            <div class="seting">
                点击设置
                <img src="../task02/images/task02_pen.png" alt="">
            </div>
        </div>
        <div class="phraseBox">
            <div class="phrase">水民词组</div>
            <div class="phrase">幽灵词组</div>
        </div>
        <div class="peopleNum">
            <form action="">
                玩家人数<input id="nm" type="text" value="11"><span>玩家数量为4-18人</span>  
            </form>
            <div class="btnBox"> 
                <input id="btnLess" type="image" src="../task02/images/222_03.png" >
                <input id="btnMiddle" type="range" min="4" max="18" step="1" >
                <input id="btnPlus" type="image" src="../task02/images/task02_plus.png" >
            </div>
        </div>
        <div class="brand">
            <button id="footButton">去发牌</button>
        </div>
    </div>
</body>
<script src="../task02/js/task02_02.js"></script>
</html>